<template>
   <el-form-item label="频道" prop="channelId">
          <el-select placeholder="请选择频道" v-model="channelId" clearable  @change="hChange">
            <el-option v-for="item in channelList"
            :key="item.id"
            :label="item.name"
            :value="item.id" ></el-option>
          </el-select>
        </el-form-item>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {
      channelList: [], // 所有的频道
      channelId: this.value // 当前选中的频道
    }
  },
  methods: {
    // 封装 发送请求获取后端数据
    async loadChannels () {
      const res = await this.$http({
        method: 'get',
        url: '/mp/v1_0/channels'
      })
      // 让所有的频道等于后端返回的真实数据
      this.channelList = res.data.data.channels
    },
    // 用户修改频道功能
    hChange () {
      console.log('用户修改了频道', this.channelId)
      this.$emit('input', this.channelId)
    }
  },
  created () {
    this.loadChannels()
  },
  watch: {
    value: function (newval, oldval) {
      this.channelId = newval
    }
  }
}
</script>
